<template>
  <div ref="shopIcon">
    <transition
      @before-enter="beforeEnter"
      @leave="leave"
      @enter="enter"
      @after-enter="afterEnter"
      name="shop"
    >
      <img v-show="JoinShow" class="shop-ball" :src="src" />
    </transition>
  </div>
</template>

<!-- 加入购物车动画效果 -->
<script>
import Velocity from "velocity-animate";
import { addCart } from "/@/api/order";
export default {
    props: {
        src:String,
        courseId:String
    },
  data() {
    return {
      JoinShow: false,
    };
  },
  methods: {
    async joinCar() {
      let result;
      result=  await addCart({ courseId: this.courseId });
      // if (this.$store.getters.role === "organ") {
      //  result= await organAddShopCar({ courseId: this.courseId });
      // } else {
      // result=  await userAddShopCar({ courseId: this.courseId });
      // }
      this.joinAnimation(result.total);
    },

    joinAnimation(cartCont) {
      let ret = this.$refs.shopIcon.getBoundingClientRect();

      // 将获取购物车icon位置与store中header的购物车icon计算
      this.traX = this.$store.getters.shopCarOffset.x - ret.x;
      this.traY = ret.y - this.$store.getters.shopCarOffset.y;
      this.JoinShow = true;
      setTimeout(() => {
        this.$store.commit("user/SET_CART",cartCont);
      }, 1000);
    },
    beforeEnter(el) {
      el.style.opacity = 1;

      el.style.transform = "translateX(0) translateY(0)";
    },
    enter(el, done) {
      let self = this;
      Velocity(
        el,
        {
          opacity: 0,

          translateX: self.traX,
          translateY: -self.traY,
        },

        {
          duration: 1000,
          complete: function () {
            done();
            self.JoinShow = false;
          },
        }
      );
    },
    afterEnter(el) {
      el.style.position = "absolute";
      el.style.opacity = 0;
    },
    leave(el, done) {
      Velocity(
        el,
        {
          opacity: 0,

          translateX: 0,
          translateY: 0,
        },

        {
          duration: 10,
          complete: function () {
            done();
            self.JoinShow = false;
          },
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
transform: translateX(0px) translateY(0px);
  position:absolute;
  z-index: 999;
}
</style>